<template>
  <ArmyPanelLayout class="myFramePanelLayout" title="">
    <div class="barracksCenterOne">
      <div class="barracksCenterOne--list">
        <div class="barracksCenterOne--list__item">
          <!--<img src="@/assets/images/armyScreen/sample1.png"/>-->
          <MySimplePlayer
            v-if="showCameraArr[0]"
            :cameraData="showCameraArr[0]">
          </MySimplePlayer>
        </div>
        <div class="barracksCenterOne--list__item">
          <!--<img src="@/assets/images/armyScreen/sample1.png"/>-->
          <MySimplePlayer
            v-if="showCameraArr[1]"
            :cameraData="showCameraArr[1]">
          </MySimplePlayer>
        </div>
      </div>
      <!--<el-button @click="nextVideoGroup">下一个 {{context}}</el-button>-->
    </div>
  </ArmyPanelLayout>
</template>

<script setup>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {queryAllCamera, getVideoPlayInfo} from '@/api/armyScreenApi.js'
import MySimplePlayer from "@/components/player/MySimplePlayer.vue";

// const context = import.meta.env.VITE_APP_CONTEXT

onMounted(async () => {
  await getVideoPlayInfoService()
  await queryAllCameraService()
})

/*********************** 视频播放 ***********************/

/*********************** 视频播放 ***********************/
let jijianConfig = null // 极简播放器的平台配置信息
async function getVideoPlayInfoService() {
  return new Promise(function (resolve, reject) {
    getVideoPlayInfo().then(res => {
      jijianConfig = res.data || null
      resolve()
    })
  })
}


/*********************** 摄像头模块 ***********************/
/**
 * 摄像头数组, 用于缓存
 */
let cameraArr = []
/**
 * 显示的摄像头
 * @type {Ref<UnwrapRef<*[]>>}
 */
const showCameraArr = ref([])
let showGroup = -1 // 默认显示的位置
/**
 * 获取 摄像头 列表
 */
async function queryAllCameraService() {
  return new Promise((resolve, reject) => {
    queryAllCamera().then(res => {
      const data = res.data
      if (data && data.length > 0) {
        cameraArr = [...data, ...data] // 扩大两倍，这样就不用考虑单数，后面计算的问题
        nextVideoGroup() // 开始播放
      } else {
        cameraArr.value = data || []
      }
      resolve()
    })
  })
}

/**
 * 显示下一组视频
 */
function nextVideoGroup() {
  showCameraArr.value = []
  nextTick(() => {
    showGroup++
    if ((showGroup * 2) > cameraArr.length) {
      showGroup = 0
    }
    const group = cameraArr.slice(showGroup * 2, showGroup * 2 + 2)
    if (jijianConfig) {
      group.forEach(item => {
        item.language = jijianConfig.language
        item.platIp = jijianConfig.platIp
        item.platePort = jijianConfig.platePort
        item.strToken = jijianConfig.strToken
        item.protocol = jijianConfig.protocol
        item.imultiRouteId = jijianConfig.imultiRouteId
      })
    }
    // group[1].indexCode = "fcd253f41fdd4f799c099997373b574c"
    showCameraArr.value = group
  })
}
</script>

<style lang="scss" scoped>
.myFramePanelLayout {
  width: 880px;
  padding-top: 0;
}

.barracksCenterOne {
  width: 880px;
  height: 312px;

  &--list {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;

    &__item {
      width: 426px;
      height: 280px;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>